<template>
  <el-card
    class="form-container"
    shadow="never"
  >
    <el-form
      :model="content"
      ref="contentFrom"
      :rules="rules"
      label-width="150px"
    >
      <el-form-item
        label="试卷名称："
        prop="name"
      >
        <el-input
          v-model="content.name"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="通过分数："
        prop="passScore"
      >
        <el-input
          v-model="content.passScore"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="试题：">
        <el-card
          shadow="never"
          style="margin-bottom: 20px"
          v-for="(item,index) in content.questionList"
          :key="index"
        >
          <el-form label-width="100px">
            <el-form-item
              label="序号："
              required
              class="item"
            >
              <el-input
                placeholder="请输入"
                v-model="item.seq"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="本题分值："
              required
              class="item"
            >
              <el-input
                placeholder="请输入"
                v-model="item.score"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="题干："
              required
              class="item"
            >
              <el-input
                placeholder="请输入"
                type="textarea"
                v-model="item.questionStem"
              ></el-input>
            </el-form-item>
            <div
              v-for="(optionItem, optionIndex) in item.optionList"
              :key="optionIndex"
            >
              <el-form-item
                :label="`选项${optionCode[optionIndex]}：`"
                required
                class="item"
              >
                <el-input
                  placeholder="请输入"
                  v-model="optionItem.optionValue"
                >
                  <el-button v-if="item.optionList.length>2" slot="append" icon="el-icon-delete" @click="deleteOption(index,optionIndex)"></el-button>
                </el-input>
              </el-form-item>
            </div>
            <el-form-item
              label="正确答案："
              required
            >
              <el-radio-group v-model="item.answer">
                <el-radio
                  style="margin: 16px 20px 20px 0"
                  v-for="(optionItem, optionIndex) in item.optionList"
                  :key="optionIndex"
                  :label="optionItem.optionCode"
                >选项{{ optionCode[optionIndex] }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button
                @click="addOption(index)"
                style="margin-top:10px"
              >+ 添加选项</el-button>
              <el-button v-if="content.questionList.length>1" type="danger" icon="el-icon-delete" @click="deleteQuestion(index)">删除试题</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <div class="grid-content bg-purple">
          <el-button
            @click="addQuestion()"
            style="margin-top:10px"
          >添加试题</el-button>
        </div>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit()"
        >确定</el-button>
        <el-button @click="back">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { examSave, getExamById } from '@/api/college'

const defaultContent = {
  trainingId: '',
  name: '',
  passScore: '',
  questionList: [
    {
      answer: '',
      examId: '',
      optionList: [
        {
          optionCode: '',
          optionValue: '',
          seq: ''
        }
      ],
      questionStem: '',
      score: ''
    }
  ],
  status: 0
}
export default {
  // name: 'MenuDetail',
  data () {
    return {
      content: Object.assign({}, defaultContent),
      rules: {
        name: [{ required: true, message: '请输入试卷名称', trigger: 'blur' }],
        passScore: [
          { required: true, message: '请输入通过分数', trigger: 'blur' }
        ]
      },
      optionCode: ['A', 'B', 'C', 'D', 'E', 'F']
    }
  },
  created () {
    this.getList()
  },
  methods: {
    addQuestion () {
      this.content.questionList.push({
        seq: '',
        score: '',
        questionStem: '',
        answer: '',
        examId: this.$route.query.examId || '',
        optionList: [
          {
            seq: 1,
            optionCode: 'A',
            optionValue: ''
          },
          {
            seq: 2,
            optionCode: 'B',
            optionValue: ''
          }
        ]

      })
    },
    deleteQuestion (index) {
      this.content.questionList.splice(index, 1)
    },
    addOption (index) {
      const length = this.content.questionList[index].optionList.length
      if (length > 5) {
        this.$message({
          message: '最多6个选项',
          type: 'error',
          duration: 1000
        })
        return
      }
      this.content.questionList[index].optionList.push({
        seq: length + 1,
        optionCode: this.optionCode[length],
        optionValue: ''
      })
    },
    deleteOption (index, optionIndex) {
      this.content.questionList[index].optionList.splice(optionIndex, 1)
    },
    onSubmit () {
      this.$refs['contentFrom'].validate((valid) => {
        if (valid) {
          this.$confirm('是否提交数据', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.content.trainingId = this.$route.query.id
            examSave(this.content).then((res) => {
              this.$message({
                message: '提交成功',
                type: 'success',
                duration: 1000
              })
              this.$router.back()
            })
          })
        } else {
          this.$message({
            message: '验证失败',
            type: 'error',
            duration: 1000
          })
          return false
        }
      })
    },
    back () {
      this.$router.go(-1)
    },
    getList () {
      getExamById({ examId: this.$route.query.examId }).then((response) => {
        this.content = response.data
        if (this.content.questionList === null || this.content.questionList.length === 0) {
          this.content.questionList = []
          this.addQuestion()
        }
      })
    }
  }
}
</script>

<style scoped>
.form-container {
  position: relative;
  z-index: 0;
  width: 800px;
}
.item {
  margin-bottom: 20px;
}
</style>
